<html>

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('#dv_scroll_down').click(function () {
                $('div.model_content').slideDown();
            });
            $('#dv_scroll_up').click(function () {
                $('div.model_content').slideUp();
            });
            $('#dv_scroll_toggle').click(function () {
                $('div.model_content:eq(2)').slideToggle();
            });
        });
    </script>
</head>
<style>
    .model_common {
        width: 600px;
        height: 80px;
        background-color: greenyellow;
        text-align: center;
        padding: 5px;
    }

    .model_content {
        display: none;
        width: 600px;
        height: 150px;
        background-color: yellowgreen;
        text-align: center;
        padding: 5px;
    }
</style>
<div>
    <div class="model_common" id="dv_scroll_down">下方滑动</div>
    <div class="model_content">下方滑动内容</div>
    <br>
    <hr>
    <br>
    <div class="model_common" id="dv_scroll_up">上方滑动</div>
    <div class="model_content">下方滑动内容</div>
    <br>
    <hr>
    <br>
    <div class="model_common" id="dv_scroll_toggle">开关滑动</div>
    <div class="model_content">下方滑动内容</div>
</div>

</html>